/*
 * @: 
 * @Version: 1.0
 * @Autor: ziwei
 * @Date: 2021-10-15 16:03:50
 * @LastEditors: ziwei
 * @LastEditTime: 2021-10-17 14:29:38
 */
const Koa = require('koa');
const Router = require('koa-router');
const static = require('koa-static');
const path = require('path');
const app = new Koa();
const router = new Router();
const fs = require('fs');
const VueServerRender = require('vue-server-renderer');

let ServerBundle = require('./dist/vue-ssr-server-bundle')
//渲染打包后的结果
let template = fs.readFileSync('./dist/index.ssr.html', 'utf8');
//客户端mainfest.json
const clientManifest = require('./dist/vue-ssr-client-manifest.json')
const render = VueServerRender.createBundleRenderer(ServerBundle, {
  template,
  clientManifest //渲染的时候 可以找到客户端的js文件 自动引入到html中
})
router.get('/', async ctx => {
  ctx.body = await new Promise((resolve, reject) => {
    //方法必须写成回调函数的形式 否则样式不生效
    render.renderToString({url:'/'},(err, data) => {
      if (err) reject(err)
      resolve(data)
    })
  })
})

app.use(router.routes());
//koa 静态服务中间件 会从这个文件去找
app.use(static(path.resolve(__dirname, 'dist')))
//如果匹配不到会执行此逻辑
//如果服务器没有此路径 会渲染当前的app.vue
app.user(async ctx=>{
  try {
    //方法必须写成回调函数的形式 否则样式不生效
    ctx.body = render.renderToString({url:ctx.url},(err, data) => {
      if (err) reject(err)
      resolve(data)
    })
  } catch (e) {
    ctx.body = '404'
  }
   
})
app.listen(3000);

//集成路由系统
//面试会问 vue ssr中的路由的跳转规则

//集成vuex